<template>
  <div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="楼层" prop="floors">
        <el-select
          multiple
          v-model="queryParams.floors"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间范围" prop="startTime" label-width="100">
        <el-date-picker
          v-model="queryParams.startTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="总楼层阈值" prop="re" label-width="60">
        <el-input placeholder="请输入内容" v-model="queryParams.re" clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="单楼层阈值" prop="rt" label-width="60">
        <el-input placeholder="请输入内容" v-model="queryParams.rt" clearable>
        </el-input>
      </el-form-item>

      </el-form-item>

      <el-button type="primary" @click="show">更新图表</el-button>
    </el-form>
    <div
      v-loading="loading"
      :style="{ width: width, height: height, margin: '80px auto' }"
    >
      <div :id="chartId" :style="{ width: width, height: height }"></div>
    </div>
  </div>
</template>

<script>
let moment = require('moment')

export default {
  name: 'number',
  data() {
    return {
      chart: '',
      loading: true,
      list: [],
      datax1: [],
      datax2: [],
      datax3: [],
      endLine:100,
      dataAll: [],
      dataZZT:[],
      graph: {
        data4th: [],
        data5th: [],
        data6th: [],
        data7th: [],
        data8th: [],
        data9th: [],
        data10th: [],
        data11th: [],
      },
      chartId: 'main',
      width: 1600 + 'px',
      height: 500 + 'px',
      queryParams: {
        floors: [],
        startTime: [],
        range: 'mint',
        re:'9',
        rt:'2'
      },
      options: [
        {
          value: '4th',
          label: '4层',
        },
        {
          value: '5th',
          label: '5层',
        },
        {
          value: '6th',
          label: '6层',
        },
        {
          value: '7th',
          label: '7层',
        },
        {
          value: '8th',
          label: '8层',
        },
        {
          value: '9th',
          label: '9层',
        },
        {
          value: '10th',
          label: '10层',
        },
        {
          value: '11th',
          label: '11层',
        },
      ],
      options1: [
        {
          value: 'day',
          label: '显示年月日',
        },
        {
          value: 'mint',
          label: '显示时分秒',
        },
      ],
    }
  },
  async created() {
    //  let  startTime = moment(new Date()).format("YYYY-MM-DD"),
    //   endTime = moment(startTime).subtract(3, "days").format("YYYY-MM-DD"),
    //   floors = []
    let startTime = '2021-06-08'
    let endTime = '2021-06-11'
    let floors = []
    await this.$axios
      .get(
        'api/realTest/findLateFiveDay'
      )
      .then((res) => {
        this.queryParams.startTime = [res.data.data.startTime,res.data.data.endTime]
        this.list = res.data.data.realTests
      })
      .then(() => {
        this.showmint()
      })
      .then(() => {
        this.createChart()
      })
      .then(() => {
        this.loading = false
      })
  },
  methods: {
    show() {
      let { floors, startTime } = this.queryParams
      let a = startTime.length ? moment(startTime[0]).format('YYYY-MM-DD') : ''
      let b = startTime.length ? moment(startTime[1]).format('YYYY-MM-DD') : ''
      if (moment(b).diff(moment(a), 'day') >= 5) {
        alert('请选择五天以内的数据')
      } else {
        this.loading = true
        this.$axios
          .post(
            'api/realTest/findByFloor?floors=' +
              floors +
              '&startTime=' +
              a +
              '&endTime=' +
              b
          )
          .then((res) => {
            this.list = res.data.data
          })
          .then(async () => {
        
              await this.showmint()
            
          })
          .then(() => {
            this.createChart()
          })
          .then(() => {
            this.loading = false
          })
      }
    },
    showmint() {
      if (this.chart != null && this.chart != '' && this.chart != undefined) {
        this.chart.dispose() //销毁
      }
      let data = JSON.parse(JSON.stringify(this.list))
      let obj = {}
      let s = '00:00:00'
      for (let i = 0; i < 96; i++) {
        obj[s] = 0
        s = moment(s, 'HH:mm:ss')
          .add(60, 'm')
          .format('HH:mm:ss')
      }
      obj['23:59:59'] = 0
      let arr = Object.keys(obj)

      
      //清空数据
      this.graph = {}
      this.datax3 = []

      let y = []
      let [v,t] =this.queryParams.startTime
      let c = moment(t).diff(moment(v),'day');
      this.endLine = Math.floor(100/c)
      for(let i =0;i<c;i++){
        this.datax3.push(moment(v).add(i,'day').format('YYYY-MM-DD'))
        y.pop()
        y = y.concat(arr)
      }
      //时间轴处理
      this.datax3.push('')
      this.datax3.unshift('')
      this.datax2 = y;
      //楼层判断
      let countFloor = this.queryParams.floors[0] || '4th'

      //数据判断有无在进行处理
      let time = data&&data
        .filter((i) => i.floor === countFloor)
        .map((i) => i.datet.slice(11, 19))

      this.datax1 = time

      async function a() {
        let graph = [4, 5, 6, 7, 8, 9, 10, 11]
        for (let j of graph) {
          this.graph['data' + j + 'th'] = data && data
            .filter((i) => {
              return i.floor === j + 'th'
            })
            .map((t) => t.count)
        }
      }
      a.apply(this)
      let all = [],allData = []
      for(let i in this.graph){
        this.graph[i] && this.graph[i].length  && all.push(this.graph[i])
      }
      for(let i in Array(all.length).fill(1)){
        for(let j = 0;j<60*24*c;j++){
          allData[j] = allData[j]?allData[j]+all[i][j]:0+all[i][j]
        }
      }
      this.dataAll = allData
      // console.log(all);
      // console.log(allData);

      //柱状图逻辑
      let {re,rt} = this.queryParams;
      let allR = all[0].length;
      let allC = all.length
      let dataZZT = Array(allR).fill(0);
      for(let j = 0;j<allR;j++){
        let teA = []
        for(let i = 0;i<allC;i++){         
            teA.push(all[i][j])
            if(teA.length === allC){
              if(teA.some(i => i<=rt && allData[j]<=re)){
                dataZZT[j] = 1
              }
            }        
        }
      }
      this.dataZZT = dataZZT

    },

    createChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById(this.chartId))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '折线图堆叠',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: [
            '4th',
            '5th',
            '6th',
            '7th',
            '8th',
            '9th',
            '10th',
            '11th',
            '总量',
          ],
          selected: {
            '4th':
              this.graph['data4th'] &&
              !this.graph['data4th'].every((i) => i == 0),
            '5th':
              this.graph['data5th'] &&
              !this.graph['data5th'].every((i) => i == 0),
            '6th':
              this.graph['data6th'] &&
              !this.graph['data6th'].every((i) => i == 0),
            '7th':
              this.graph['data7th'] &&
              !this.graph['data7th'].every((i) => i == 0),
            '8th':
              this.graph['data8th'] &&
              !this.graph['data8th'].every((i) => i == 0),
            '9th':
              this.graph['data9th'] &&
              !this.graph['data9th'].every((i) => i == 0),
            '10th':
              this.graph['data10th'] &&
              !this.graph['data10th'].every((i) => i == 0),
            '11th':
              this.graph['data11th'] &&
              !this.graph['data11th'].every((i) => i == 0),
            总量: this.dataAll && !this.dataAll.every((i) => i == 0),
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {},
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.datax1,
            axisLabel: {
              rotate: 90,
            },
            show: false,
          },
          {
            type: 'category',
            data: this.datax2,
            boundaryGap: false,
            axisLabel: {
              rotate: 90,
            },
            position: 'bottom',
            show: true,
          },

        ],
        dataZoom: [
            {
                show: true,
                realtime: true,
                start: 0,
                end: this.endLine,
                zoomLock:true,
            },
            
        ],
  
        yAxis: [
          {
          type: 'value',
          },
          {
            type: 'value',
            scale: true,
            boundaryGap: false,
            name: '柱状图',
            splitLine:{
                show:false
            },
        }
        ],
        series: [
          {
            name: '4th',
            type: 'line',
            // stack: '总量',
            data: this.graph.data4th,
            symbol: 'none',
          },
          {
            name: '5th',
            type: 'line',
            // stack: '总量',
            data: this.graph.data5th,
            symbol: 'none',
          },
          {
            name: '6th',
            type: 'line',
            // stack: '总量',
            data: this.graph.data6th,
            symbol: 'none',
          },
          {
            name: '7th',
            type: 'line',
            // stack: '总量',
            data: this.graph.data7th,
            symbol: 'none',
          },
          {
            name: '8th',
            type: 'line',
            // stack: '总量',
            data: this.graph.data8th,
            symbol: 'none',
          },
          {
            name: '9th',
            type: 'line',
            // stack: '总量',
            data: this.graph.data9th,
            symbol: 'none',
          },
          {
            name: '10th',
            type: 'line',
            // stack: '总量',
            data: this.graph.data10th,
            symbol: 'none',
          },
          {
            name: '11th',
            type: 'line',
            // stack: '总量',
            data: this.graph.data11th,
            symbol: 'none',
          },
          {
            name: '总量',
            type: 'line',
            // stack: '总量',
            data: this.dataAll,
            symbol: 'none',
          },
          {
            name:'此刻关闭',
            type:'bar',
            yAxisIndex: 1,
            data:this.dataZZT,
            barWidth:'100%',
            itemStyle: {
              color: "#7fa1ff",
              borderColor: "#7fa1ff",
              borderWidth:-1,
          }
        },
        ],
      }
      this.chart.setOption(option)
    },
  },
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
